<template>
  <div
    class="lunaCheckbox"
    :class="[
      { checked: checked },
    ]"
    @click="handelCheck"
  >
    <div
      class="emptyCheckbox"
      :class="[
        { checked: checked },
      ]"
    >
      <transition name="scaleCheckboxIcon">
        <i v-if="checked" class="iconfont icon-check"></i>
      </transition>
    </div>
    <template>
      <slot></slot>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Checkbox',
  props: {
    value: {
      type: [Number, String, Boolean],
      default: false
    },
  },
  data() {
    return {
      checked: false,
      currentValue: ''
    }
  },
  mounted() {
    this.currentValue = this.value
    this.checked = this.value === this.trueValue
  },
  watch: {
    value() {
      this.currentValue = this.value
      this.checked = this.currentValue === this.trueValue
    }
  },
  methods: {
    handelCheck() {
      if (this.beforeChecked) {
        this.$emit('onBeforeChange', this.falseValue, this.trueValue)
        return
      }
      if (this.checked) {
        this.currentValue = this.falseValue
      } else {
        this.currentValue = this.trueValue
      }
      this.checked = !this.checked
      this.$emit('input', this.currentValue)
      this.$emit('onChange', this.currentValue)
    }
  }
}
</script>

<style scoped></style>
